<link rel="stylesheet" type="text/css" href="{$SOCIAL_BEAST_ADMIN_URL}/styles/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700' rel='stylesheet' type='text/css'>
<script src="{$SOCIAL_BEAST_ADMIN_URL}/styles/js/main.js"></script>
<section class="clearfix form-elements cb-uikit">
                    <section class="cover clearfix text-center">
                <div class="cb-logo">
                    <img src="{$SOCIAL_BEAST_ADMIN_URL}/styles/images/cb-logo.png" alt="" class="img-responsive">
                </div>
                <h1><em>Social Beast</em></h1>
            </section>
                <header class="clearfix">
                    <h3 class="bluecolor4">Social Links</h3>
                    <div id="honey_config_msg"></div>
                </header>
                <form name="social_beast" id="social_beast" class="form-horizontal" action="#">
                    <div class="clearfix">
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                        <div class="form-group">
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Facebook</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="facebook" id="facebook" class="form-control" placeholder="Your URL here"  value="{$facebook}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Twitter</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="twitter" id="twitter" class="form-control" placeholder="Your URL here"  value="{$twitter}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Google +</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="google" id="google" class="form-control" placeholder="Your URL here"  value="{$google}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">LinkedIn</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="linkedin" id="linkedin" class="form-control" placeholder="Your URL here"  value="{$linkedin}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Pinterest</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="pinterest" id="pinterest" class="form-control" placeholder="Your URL here"  value="{$pinterest}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Reddit</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="reddit" id="reddit" class="form-control" placeholder="Your URL here"  value="{$reddit}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Youtube</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="youtube" id="youtube" class="form-control" placeholder="Your URL here"  value="{$youtube}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Vine</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="vine" id="vine" class="form-control" placeholder="Your URL here"  value="{$vine}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">RSS</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="rss" id="rss" class="form-control" placeholder="Your URL here"  value="{$rss}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Github</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="github" id="github" class="form-control" placeholder="Your URL here"  value="{$github}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Dropbox</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="dropbox" id="dropbox" class="form-control" placeholder="Your URL here"  value="{$dropbox}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reqtxt" class="col-sm-2 control-label">Stumbleupon</label>
                                <div class="col-sm-10">
                                    <div class="required-field-block">
                                        <input type="text" name="stumbleupon" id="stumbleupon" class="form-control" placeholder="Your URL here"  value="{$stumbleupon}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix">
                        <button type="submit" id="social_beast_submit" class="btn btn-success" value="update">Update Settings</button>
                    </div>
                </form>
            </section>

<script type="text/javascript">
	var ajax_file = '{$ajax_file}';

	 $('#social_beast_submit').on("click",function(e){
        e.preventDefault();
        $('#honey_config_msg').hide();
        var form_fields = $( "#social_beast" ).serialize();
    	 $.ajax({
    	 	url: ajax_file,
    	 	type: "POST",
    	 	data:form_fields,
    	 	 success: function(result){
    	 	 
            $("#honey_config_msg").html("<div class='alert alert-success'>"+"Your social links has been updated!"+result+"</div>");
            $('#honey_config_msg').fadeIn("slow");
    	}});
    });


</script>